<template>
	<view>
		<view class="status_bar"></view>
		<view class="status_bar_bottom"></view>
		<view :class="'viewHeader ' + (navigatorType == 2 ? 'topnavview' : '')">
			<text class="topTitle">消息</text>
			<text v-if="navigatorType == 2 && textnum > 0">({{textnum > 99 ? '99+' : textnum}})</text>
			<view class="rightIco">
				<view v-if="navigatorType == 2" style="position: relative;display: inline-block;">
					<image @click="goTxl" src="../../static/txl.png">
						<view v-if="txl_count > 0" class="iconHd"></view>
					</image>
				</view>
				<view v-if="navigatorType == 2" style="position: relative;display: inline-block;">
					<image @click="goPyq" src="../../static/pyq.png">
						<view v-if="pyq_count > 0" class="iconHd"></view>
					</image>
				</view>
				<image @click="BarButtonTap" src="../../static/top_right.png"></image>
			</view>
		</view>
		<view style="height: 45px;"></view>
		<watermark></watermark>
		<uni-list-wx>
			<uni-list-wx :border="true">
				<view class="alertTips" v-if="list.length <= 0">暂无消息,快去联系你的好朋友吧</view>
				<view v-for="(v, i) in toplist" :key="i">
					<uni-list-chat-wx color="#eeeeee" :itemKey="i" :item="v" @longpressItem="longpressItem" :longTapItemKey="longTapItemKey" @click="clickChat(v)" clickable :title="v.nickName" :note="v.content" :time="v.f_time" badge-positon="left" :badge-text="v.num" :addGroupApply="v.addGroupApply"></uni-list-chat-wx>
				</view>
				<view v-for="(v, i) in NOTtoplist" :key="i">
					<uni-list-chat-wx color="#fff" :itemKey="i" :item="v" @longpressItem="longpressItem" :longTapItemKey="longTapItemKey" @click="clickChat(v)" clickable :title="v.nickName" :note="v.content" :time="v.f_time" badge-positon="left" :badge-text="v.num" :addGroupApply="v.addGroupApply"></uni-list-chat-wx>
				</view>
			</uni-list-wx>
		</uni-list-wx>
		<top-right-tool-wx ref="trtw"></top-right-tool-wx>
	</view>
</template>
<script>
	var app = getApp();
	import {
		timestampFormat
	} from '../../common/time.js';
	export default {
		data() {
			return {
				longTapItemKey: 0,
				tranMsg: '',
				list: [],
				toplist: [],
				NOTtoplist: [],
				clickToSubmitSure: null,
				textnum: 0,
				txl_count: 0,
				pyq_count: 0
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo;
			},
			chatlist() {
				return this.$store.state.chatlist;
			},
			chatlistkeys() {
				return Object.keys(this.chatlist);
			},
			chatListNum() {
				return this.$store.state.chatListNum;
			},
			topicReply() {
				return this.$store.state.topicReply;
			},
			friendApply() {
				return this.$store.state.friendApply;
			},
			navigatorType() {
				return this.$store.state.navigatorType;
			}
		},
		watch: {
			chatListNum: {
				deep: true, //深度监听可见听对象中的元素变化例:obj.id
				immediate: false, //在进入页面时，第一次绑定值，不会立刻执行监听，只有数据发生改变才会执行handler中的操作
				handler(val) {
					//watch事件
					if (val > 0) {
						this.textnum = val;
					} else {
						this.textnum = 0;
					}
				}
			},
			friendApply: {
				deep: true, //深度监听可见听对象中的元素变化例:obj.id
				immediate: false, //在进入页面时，第一次绑定值，不会立刻执行监听，只有数据发生改变才会执行handler中的操作
				handler(val) {
					//watch事件
					if (val.count && val.count > 0) {
						this.txl_count = val.count;
					} else {
						this.txl_count = 0;
					}
				}
			},
			topicReply: {
				deep: true, //深度监听可见听对象中的元素变化例:obj.id
				immediate: false, //在进入页面时，第一次绑定值，不会立刻执行监听，只有数据发生改变才会执行handler中的操作
				handler(val) {
					if (val.count && val.count > 0) {
						this.pyq_count = val.count;
					} else {
						this.pyq_count = 0;
					}
				}
			},
			chatlist: {
				deep: true, //深度监听可见听对象中的元素变化例:obj.id
				immediate: false, //在进入页面时，第一次绑定值，不会立刻执行监听，只有数据发生改变才会执行handler中的操作
				handler(val) {
					//watch事件
					var obj = JSON.parse(JSON.stringify(val));
					if(obj){
						this.addChatlist(obj);
					}
				}
			}
		},
		methods: {
			viewLoad(){
				this.clickToSubmitSure = this.$fc.debounce(
					e => {
						uni.navigateTo({
							url: '../chatWindow/index?userId=' + e.userId + '&windowType=' + e.windowType
						});
					},
					1000,
					true
				);
				if(app.globalData.pushcid){
					console.log('客户端推送标识:',app.globalData.pushcid);
				}else{
					setTimeout(()=>{
						if(app.globalData.pushcid==''){
							this.$fc.getuniPushClientId((nowCid) => {
									console.log('客户端推送标识:',nowCid);
									this.$http.request({
										url: '/my/bindCid/?cid='+nowCid,
										success: (res) => {
											uni.setStorageSync('cid', nowCid);
										}
									});
							})
						}
					},1000);
				}
			},
			viewShow(){
				this.updateUserinfo();
				this.$store.dispatch('tabBarpull');
			},
			viewRefresh(){
				uni.stopPullDownRefresh();
			},
			viewBottom(){
				
			},
			viewScroll(e){
				
			},
			updateUserinfo(){
			   this.$http.request({
					url: '/my/getInfo',
					success: (res) => {
						if (res.data.code == 200) {
							this.$store.commit('update_UserInfo',res.data.data);
						}else{
							
						}
					},
					fail: (error) => {}
				});
			},
			addChatlist(obj){
				var newarr = [];
				var toplist = [];
				var NOTtoplist = [];
				for (var k in obj) {
				    //console.log(obj[k]);
					obj[k]['xtime'] = new Date(obj[k]['time']).getTime().toString();
					obj[k]['f_time'] = timestampFormat(obj[k]['xtime']);
					if(obj[k]['content'])obj[k]['content'] = this.$fc.filteremoji(obj[k]['content']);
					if (obj[k]['userId']) {
						newarr.push(obj[k]);
					}
					if (obj[k]['userId'] && obj[k]['top'] == 'Y') {
						toplist.push(obj[k]);
					}
					if (obj[k]['userId'] && obj[k]['top'] == 'N') {
						NOTtoplist.push(obj[k]);
					}
				}
				newarr.sort((a, b) => {
					return b['xtime'] - a['xtime'];
				});
				toplist.sort((a, b) => {
					return b['xtime'] - a['xtime'];
				});
				NOTtoplist.sort((a, b) => {
					return b['xtime'] - a['xtime'];
				});
				this.list = newarr;
				this.toplist = toplist;
				this.NOTtoplist = NOTtoplist;
			},
			longpressItem(e, i, v) {
				// console.log(e,i,v)
				this.longTapItemKey = i;
			},
			returnAvatar(text) {
				var data = JSON.parse(text);
				var avatars = [];
				for (var i = 0; i < data.length; i++) {
					avatars.push({
						url: data[i]
					});
				}
				return avatars;
			},
			clickChat(e) {
                if(e.is_at && e.is_at==1){
                    var key  = e.windowType=="GROUP"?"GROUP"+e.userId:e.userId;
                    var msgList = this.$store.state.chatlist[key];
                    msgList.is_at=0;
					this.$store.dispatch('updateChatListInfoById', {
						userId: key,
						data: msgList
					});
                }
				this.clickToSubmitSure(e);
			},
			BarButtonTap(){
				this.$refs['trtw'].showTab();
			},
			goTxl(){
				uni.navigateTo({
					url: '../txl/index'
				})
			},
			goPyq(){
				uni.navigateTo({
					url: '../pyq/index'
				})
			}
		},
	};
</script>
<style scoped>
	.alertTips {
		line-height: 80rpx;
		background-color: #fcfcfc;
		color: #999999;
		text-align: center;
		font-size: 28rpx;
	}
	.status_bar{
		height: var(--status-bar-height);
		width: 100%;
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
		background: #FFFFFF;
	}
	.status_bar_bottom{
		width: 100%;
		height: var(--status-bar-height);
	}
	.viewHeader{
		width: 100%;
		height: 45px;
		line-height: 45px;
		text-align: center;
		color: #000;
		background: #FFFFFF;
		font-size: 18px;
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
		z-index: 999;
	}
	.topnavview{
		text-align: left !important;
		font-size: 20px !important;
		font-weight: 700 !important;
	}
	.topnavview .topTitle{
		margin-left: 15px;
	}
	.rightIco{
		height: 45px;
		position: absolute;
		right: 15px;
		top: 0;
	}
	.rightIco image{
		width: 22px;
		height: 22px;
		vertical-align: middle;
		margin-left: 20px;
	}
	.iconHd{
		width: 10px;
		height: 10px;
		position: absolute;
		top: 5px;
		right: -5px;
		border-radius: 100%;
		background: red;
	}
</style>